<template>
  <div>
    <div class="contentTopTitle">
      <div class="title">预算调整</div>
    </div>
    <div class="operation">
      <el-form :inline="true" size="mini">
        <el-form-item label="账期" label-width="80px">
          <el-date-picker
            v-model="form.accctMonth"
            type="year"
            placeholder="选择账期"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handle_search()"
            >查询</el-button
          >
          <el-button size="mini" type="warning" @click="handle_export()"
            >导出</el-button
          >
          <el-button size="mini" type="warning" @click="exportTemp()" v-if="areaId == 1"
            >下载模板</el-button
          >
          <el-button size="mini" type="success" @click="$refs.importDialog.show()" v-if="areaId == 1"
            >导入</el-button
          >
        </el-form-item>
      </el-form>
      <div class="tableBox" style="margin-top: 20px">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          height="65vh"
          border
          stripe
          ref="table"
        >
          <el-table-column prop="areaName" label="单位" align="center" />
          <el-table-column prop="values" label="年度税前利润总目标" align="center" min-width="90" />
          <el-table-column 
            v-for="(item, i) in columns"
            :key="i" 
            :prop="item.prop" 
            :label="item.label" 
            align="center" 
            min-width="90"
          >
            <el-table-column 
              v-for="child in item.children" 
              :key="child.prop"
              :prop="child.prop" 
              :label="child.label" 
              align="center" 
              min-width="80"
            /> 
          </el-table-column>
        </el-table>
      </div>
    </div>
    <ImportDialog ref="importDialog" @refresh="getList"></ImportDialog>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { createSpanTrend } from "@/utils/mixin.js";
import prefixAPI from "@/api/prefixAPI";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
const exportUrl = prefixAPI.pack;
export default {
  components: {
    ImportDialog: () => import("./importDialog.vue")
  },
  data() {
    return {
      areaId: null,
      form: {
        accctMonth: new Date().getFullYear()+"",
      },
      tableData: [],
      columns: [],
      tableLoading: false,
      chineseNumbers: ['一', '二', '三', '四']
    };
  },
  created() {
    this.areaId = JSON.parse(sessionStorage.getItem("accountInfo")).areaId;
    this.getList();
  },
  methods: {
    getList() {
      this.tableLoading = true;
      $budgetAPI.getFinancialBudgetAdjustmentData(
        {
          accctMonth: this.form.accctMonth,
          token: getCookie("token")
        },
        (res) => {
          if (res && res.code == 0) {
            const { datas, head1s, heads, keys } = res.content;
            const { chineseNumbers } = this;
            let keyIndex = 0;
            keys.splice(0, 2);
            this.columns = [];
            head1s.forEach((it, i) => {
              this.columns.push({
                label: it,
                children: heads[i].map(label => ({ label, prop: keys[keyIndex++] }))
              });
              this.columns.push({label: chineseNumbers[i]+'季度调后利润目标', prop: keys[keyIndex++]});
            })
            console.log(this.columns);
            this.tableData = datas;
          }
          this.tableLoading = false;
        },
        err => {
          this.tableLoading = false;
        }
      );
    },
    handle_search() {
      this.getList();
    },
    handle_export() {
      downLoadExcelParams(
        "/budgetIncomeSecond/exportFinancialBudgetAdjustmentData",
        {...this.form, token: getCookie("token")}, 
        this.form.accctMonth + "预算调整"
      );
    },
    exportTemp() {
      downLoadExcelParams(
        "/budgetIncomeSecond/getFinancialBudgetAdjustmentTemplate",
        { token: getCookie("token") }, 
        "预算调整模板"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.tableBox {
  margin-top: 20px;
}
.el-form {
  margin-top: 10px;
}
/deep/ .el-form-item__label {
  line-height: 32px !important;
}
</style>
